<template>
  <div class="main-map">
    <div class="main-map-bg1">
      <div class="main-map-bg2">
        <div id="chart404" class="main-map-box" />
      </div>
    </div>
  </div>
</template>

<script>
import JSON from "../../assets/json/330783.json";
import * as echarts from "echarts";
export default {
  data() {
      return {
        mapBj: require('@/assets/imgHome/map_bg.svg'),
      }
    },
  mounted() {
    //  幼儿园
    var gubageArr = [
      {
        name: "智慧星幼儿园",
        value: [120.33, 29.3, 120],
        type: "laji",
        title:'幼儿园'
      },
      {
        name: "城东中心幼儿园",
        value: [120.34662,29.234553, 120],
        type: "laji",
        title:'幼儿园'
      },
    ];
    // 小学
    var guanwang = [
      {
        name: "官桥小学",
        value: [120.33, 29.15, 120],
        type: "guanwang",
        title:'小学'
      },

      {
        name: "塘西小学",
        value: [120.33, 29.25, 120],
        type: "guanwang",
        title:'小学'
      },
      {
        name: "罗屏小学",
        value: [120.33, 29.24, 120],
        type: "guanwang",
        title:'小学'
      },
      {
        name: "文荣实验学校",
        value: [120.33, 29.12, 120],
        type: "guanwang",
        title:'小学'
      },
      {
        name: "画溪小学",
        value: [120.146869, 29.164846, 120],
        type: "guanwang",
        title:'小学'
      },
    ];

    // 初中
    var lvdi = [
      {
        name: "横店二中",
        value: [120.33, 29.13, 120],
        type: "lvdi",
        title:'初中'
      },
      {
        name: "横店四中",
        value: [120.33, 29.2, 80],
        type: "lvdi",
        title:'初中'
      },
      {
        name: "千祥镇中",
        value: [120.33, 29.0, 120],
        type: "lvdi",
        title:'初中'
      },
      {
        name: "李宅初中",
        value: [120.302496,29.268082, 120],
        type: "lvdi",
        title:'初中'
      },
      {
        name: "三单中小学",
        value: [120.64022, 29.30195, 120],
        type: "lvdi",
        title:'初中'
      },
      {
        name: "歌山一中",
        value: [120.383271,29.272493, 120],
        type: "lvdi",
        title:'初中'
      },

    ];

    // 高中
    var ranqi = [
      {
        name: "王官营小学",
        value: [120.148151, 29.174443, 120],
        type: "ranqi",
        title:'高中'
      },

      {
        name: "南马高中",
        value: [120.146869, 29.114846, 120],
        type: "ranqi",
        title:'高中'
      },
      {
        name: "湖溪高中",
        value: [120.379534,29.231779, 120],
        type: "ranqi",
        title:'高中'
      },
    ];

    //中职
    var jinggai = [

      {
        name: "花园技校",
        value: [120.430846,29.24968, 120],
        type: "jinggai",
        title:'中职'
      },
    ];
    this.initEchart(gubageArr, guanwang, lvdi,ranqi,jinggai);
  },
  methods: {
    initEchart(gubageArr, guanwang, lvdi, ranqi,jinggai) {
      console.log(9999, gubageArr);
      echarts.registerMap("东阳市", JSON);
      var myChart = echarts.init(document.getElementById("chart404"));
      let option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (typeof params.value[2] == "undefined") {
              return ''
            } else {
              //return params.name + " : " + params.value[2];
              return params.name;
            }
          },
          backgroundColor: 'rgba(8, 46, 75, 0.9)',
          borderColor: '#31CEE5',
          textStyle: {
              color: '#fff',
              fontSize:'13'
          },
        },
        legend: {
          orient: "horizontal",
          id: 1,
          y: "bottom",
          x: "center",
          itemWidth: 10,
          itemHeight: 10,
          formatter: function (name) {

            console.log('8888',gubageArr.length,gubageArr);
             let target
              for (let i = 0, l = gubageArr.length; i < l; i++) { //幼儿园
                if (gubageArr[i].title == name) {
                  target = gubageArr.length
                }
              }
              for (let i = 0, l = guanwang.length; i < l; i++) { //小学
                if (guanwang[i].title == name) {
                  target = guanwang.length
                }
              }
              for (let i = 0, l = lvdi.length; i < l; i++) { //初中
                if (lvdi[i].title == name) {
                  target = lvdi.length
                }
              }
              for (let i = 0, l = ranqi.length; i < l; i++) { //高中
                if (ranqi[i].title == name) {
                  target = ranqi.length
                }
              }

              for (let i = 0, l = jinggai.length; i < l; i++) { //中职
                if (jinggai[i].title == name) {
                  target = jinggai.length
                }
              }
              let arr = [
                '{a|' + name + ': }',
                '{b|' + target + '}',
                '{d|所}',
               // '{c|' + d + '%}',
                '{e| }',
              ]
              return arr.join('')
            },
          // ],
          padding: [0, 20],
            textStyle: {
              color: '#fff',
              rich: {
                a: {
                  fontSize: 16,
                  fontFamily: 'PingFangSC',
                  color: 'rgba(255,255,255,0.85)',
                  padding: [0, 0, 0, 0],
                  width: 60
                },
                b: {
                  fontSize: 18,
                  fontFamily: 'DINPro',
                  padding: [4, 0, 0, 0],
                  width: 20
                },
                d: {
                  fontSize: 16,
                  fontFamily: 'PingFangSC',
                  padding: [0, 20, 0, -5],
                },
                c: {
                  fontSize: 20,
                  fontFamily: 'DINPro',
                  color: '#01FFFF',
                  padding: [0, 0, 0, 10],
                  width: 60
                },
                e: {

                }
              }
            }
        },

        geo: {
          show: true,
          map: "东阳市",
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          zoom: 1.1,
          roam: false,
          // itemStyle: {
          //   normal: {
          //     areaColor: '#3894ec',//背景色
          //     borderColor: "#3fdaff",
          //     borderWidth: 2,
          //     shadowColor: "rgba(63, 218, 255, 0.5)",
          //     shadowBlur: 30,
          //   },
          //   emphasis: {
          //     areaColor: "#03356B",
          //   },
          // },
          "itemStyle": {
            "areaColor": "rgba(8, 46, 75, 0.71)",
            "borderColor": "#02FFFE",
            "borderWidth": 1,
            "borderType": "dashed",
            "borderDashOffset": [
              8,
              20
            ]
          },
        },
        series: [
          {
            type: "map",
            roam: false,
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: "12px",
                  color: "#fff",
                },
              },
              emphasis: {
                textStyle: {
                  color: "rgb(183,185,14)",
                },
              },
            },
            "itemStyle": {
              "areaColor": {
                "type": "radial",
                "x": 0.5,
                "y": 0.5,
                "r": 0.5,
                "colorStops": [
                  {
                    "color": "rgba(8, 46, 75, 0.01)",
                    "offset": 0
                  },
                  {
                    "color": "rgba(7,101,160,0.32)",
                    "offset": 1
                  }
                ]
              },
              "borderColor": "#02FFFE",
              "borderWidth": 1,
              "borderType": "solid",
              "borderType": "dashed",
                  emphasis: {
                  label: {
                    show: true,
                    textStyle: {
                      color: '#000', // #63F3FF
                      fontSize: 13,
                      // fontWeight: 'bold',
                      // fontFamily: 'DingTalk',
                      // padding: [0,0],
                    }
                  },
                  areaColor: 'rgba(8, 46, 75, 0.86)',
                  borderColor: '#88d7fa',
                  borderWidth: 1
                },
            },
            zoom: 1.1,
            // roam: true,
            map: "东阳市", //使用
            //data: this.difficultData, //热力图数据   不同区域 不同的底色
          },
          {
            name: "幼儿园",
            type: "scatter",
            coordinateSystem: "geo",
            data: gubageArr,
            symbol:'rect',
            symbolSize: 9,
            label: {
              normal: {
                show: false,
                formatter: function (params) {
                  return params.name;
                },
                position: "right",
                color: "#0884FF",
                fontSize: "15",
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#0884FF",
                borderWidth: 0,
                borderColor: "#0884FF",
              },
            },
          },
          {
            name: "小学",
            type: "scatter",
            coordinateSystem: "geo",
            data: guanwang,
            symbol:'rect',
            symbolSize: 9,
            label: {
              normal: {
                show: false,
                formatter: function (params) {
                  // console.log(params);
                  return params.name;
                },
                position: "right",
                color: "#fff",
                fontSize: "8",
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#3AEBFD",
              },
            },
          },
          {
            name: "初中",
            type: "scatter",
            coordinateSystem: "geo",
            data: lvdi,
            symbol:'rect',
            symbolSize: 9,
            label: {
              normal: {
                show: false,
                formatter: function (params) {
                  // console.log(params);
                  return params.name;
                },
                position: "right",
                color: "#fff",
                fontSize: "8",
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#FFDA00",
              },
            },
          },
          {
            name: "高中",
            type: "scatter",
            coordinateSystem: "geo",
            data: ranqi,
            symbol:'rect',
            symbolSize: 9,
            label: {
              normal: {
                show: false,
                formatter: function (params) {
                  // console.log(params);
                  return params.name;
                },
                position: "right",
                color: "#fff",
                fontSize: "8",
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#00FFAA",
              },
            },
          },
          {
            name: "中职",
            type: "scatter",
            coordinateSystem: "geo",
            data: jinggai,
            symbol:'rect',
            symbolSize: 9,
            label: {
              normal: {
                show: false,
                formatter: function (params) {
                  // console.log(params);
                  return params.name;
                },
                position: "right",
                color: "#fff",
                fontSize: "8",
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#CE6543",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped>
.main-map {
  width: 100%;
  height: 100%;
  position: relative;
}
.main-map-bg1 {
  width: 100%;
  height: 100%;
  background: url("~@/assets/imgHome/map-bg-2.svg") left no-repeat;
  text-align: center;
  background-position-x: center;
  background-position-y: -118%;
}
.main-map-box {
  width: 905px;
  height: 820px;
  margin-left: -20px;
  text-align: center;
}
</style>
